
window.addEventListener('load', function () {
    //1.鼠标经过时，箭头显示，鼠标离开箭头消失
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var ul = focus.querySelector('ul');
    var focusWidth = focus.offsetWidth;
    focus.addEventListener('mouseenter', function () {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    focus.addEventListener('mouseleave', function () {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function () {
            arrow_r.click();
        }, 2000)
    })
    //2.下方的小圆圈，根据图片个数动态生成
    for (var i = 0; i < ul.children.length; i++) {
        //(1)创建节点
        var li = document.createElement('li');
        li.setAttribute('index', i);//给li创建属性，方便后面使用
        //(2)添加节点
        var ol = document.querySelector('.circle');
        ol.appendChild(li);
        //3.一点小圆圈变成白色(排他思想)  生成的同时就绑定事件
        li.addEventListener('click', function () {
            //清除所有白色
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            //只让当前的颜色改变
            this.className = 'current';
            //4.点击小圆圈 让ul中的图片滚动起来（实质上是ul在滚动）
            var index = this.getAttribute('index');
            animate(ul, -index * focusWidth);
            num = index;
            circle = index;
        })
    }
    ol.children[0].className = 'current'; //第一个默认白色
    //5.点击右箭头切换图片
    //将第一张图复制一份加到ul的最后面，为循环轮播图做准备
    //之所以放在生成节点之外，是因为要避免动态生成的小圆圈多一个。
    var firstClone = ul.children[0].cloneNode(true);
    ul.appendChild(firstClone);
    var num = 0;
    var circle = 0;
    var flag = true;
    arrow_r.addEventListener('click', function () {
        if (flag) {//节流阀，防止快速点击按钮后，轮播图切换过快
            flag = false;
            //下面是为了完成循环轮播图，思想是在图片之后再加一张与第一张图一样的
            if (num == ul.children.length - 1) {//在最后一张与第一张一样的图时
                ul.style.left = 0 + 'px'; //立即回到第一张图片
                num = 0;
            }
            num++;//到第二张图片
            animate(ul, -num * focusWidth, function () {
                flag = true;
            })
            //6.点击右侧按钮，小圆圈跟着变色(排他)
            circle++;
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            if (circle == ul.children.length - 1) {
                circle = 0;
            }
            ol.children[circle].className = 'current';
        }
    })
    //6.点击左侧箭头实现跳转
    arrow_l.addEventListener('click', function () {
        if (flag) {//节流阀，防止快速点击按钮后，轮播图切换过快
            flag = false;
            //下面是为了完成循环轮播图，思想是在图片之后再加一张与第一张图一样的
            if (num == 0) {//在第一张图片时
                ul.style.left = -(ul.children.length - 1) * focusWidth + 'px'; //立即回到最后的克隆图片
                num = ul.children.length - 1;
            }
            num--;//到第二张图片
            animate(ul, -num * focusWidth, function () {
                flag = true;
            })
            //6.点击左侧按钮，小圆圈跟着变色(排他)
            circle--;
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            ol.children[circle].className = 'current';
        }
    })
    //7.实现自动播放图片
    var timer = setInterval(function () {
        arrow_r.click();
    }, 2000)

})